<template>

  <view v-if="notice" class="comp__notice-bar" @click="handleClick">
    <view class="wrapper">
      <basic-icons name="icon52" size="32rpx"></basic-icons>

      <text class="content">{{shortNotice}}</text>

      <basic-icons name="icon-arrow-right" size="26rpx"></basic-icons>
    </view>
    
  </view>
</template>
<script>
export default {
  name: 'notice-bar',

  props: {
    notice: String,

    wordLimit: {
      type: Number,
      default: 40,
    },

    clickable: {
      type: Boolean,
      default: true
    }
  },

  computed: {
    shortNotice() {
      if(this.notice.length <= this.wordLimit){
        return this.notice
      } else{
        return this.notice.substr(0, this.wordLimit - 3)+'...'
      }
    }
  },

  methods: {
    handleClick() {
      if (!this.clickable) return

      this.$emit('click')
    }
  }
}
</script>
<style lang="less">
.comp__notice-bar {
  color: @font_tag_color;
  background-color: #ffffff;

  .wrapper {
    .flex;
    .flex-middle;

    height: 100rpx;

    background-color: fade(@font_tag_color, 10%);
    padding: 0 30rpx;
  }

  .content {
    .flex-1;
    color: @font_light_color;
    margin-left: 20rpx;
  }
}
</style>